<template>
	<view class="baseForm">
		<!-- 当前作业 -->
		<view class="list">
			<view class="card" v-if="isLandscape == false">
				<view class="flex record-title">
					<text class="line1">熔炼工单</text>
					<view></view>
				</view>
				<view class="flex flex-col justify-between h-full record-content-body">
					<view class="record-content">
						<view class="record-item">
							<text class="flex-1">产品: {{ formData.materialName }}</text>
							<text class="flex-1">熔炼工单号: {{ formData.processingOrderNumber || '无' }}</text>
							<!-- <text class="flex-1">
								生产批次: {{ formData.planBatch || "无" }}
							</text>
							<text class="flex-1">
								生产日期: {{ formData.manufactureDate || "无" }}
							</text> -->
						</view>
						<view class="record-item">
							<!-- <text class="flex-1">
								产品: {{ formData.productName }}
							</text>
							<text class="flex-1">
								熔炼工单号: {{ formData.orderNo || "无" }}
							</text> -->
							<text class="flex-1">生产批次: {{ formData.producePlanCode || '无' }}</text>
							<text class="flex-1">生产日期: {{ formData.planDate || '无' }}</text>
						</view>
						<view class="record-item">
							<text class="flex-1">炉号: {{ formData.plannedBatch || '无' }}</text>
							<text class="flex-1">炉重kg: {{ formData.stoveCountNum }}</text>
							<!-- <text class="flex-1">
								炉数: {{ formData.heatNumber }}
							</text> -->
						</view>
						<view class="record-item">
							<text class="flex-1">炉数: {{ formData.stoveCount }}</text>
							<text class="flex-1"></text>
						</view>
						<view class="record-item">
							<text class="flex-1">计划开始时间: {{ formData.planBeginTime }}</text>
							<text class="flex-1">计划结束时间: {{ formData.planEndTime }}</text>
						</view>
						<!-- <view class="record-item">
							<text>
								实际开发时间 {{ formData.actualStartTime }}
							</text>
							<text>
								实际结束时间 {{ formData.actualEndTime }}
							</text>
						</view> -->
					</view>
				</view>
			</view>

			<view
				class="card"
				v-if="isLandscape == true"
				:style="{
					padding: isLandscape == true ? '30px' : ''
				}"
			>
				<view class="flex record-title">
					<text class="line1">熔炼工单</text>
					<view></view>
				</view>
				<view class="flex flex-col justify-between h-full record-content-body">
					<view class="record-content">
						<view class="record-item">
							<text class="flex-1">产品: {{ formData.materialName }}</text>
							<text class="flex-1">熔炼工单号: {{ formData.processingOrderNumber || '无' }}</text>
							<text class="flex-1">生产批次: {{ formData.producePlanCode || '无' }}</text>
							<text class="flex-1">生产日期: {{ formData.planDate || '无' }}</text>
						</view>
						<view class="record-item">
							<text class="flex-1">炉号: {{ formData.plannedBatch || '无' }}</text>
							<text class="flex-1">炉重kg: {{ formData.stoveCountNum }}</text>
							<text class="flex-1">炉数: {{ formData.stoveCount }}</text>
							<text class="flex-1"></text>
						</view>
						<view class="record-item">
							<text class="flex-1">计划开始时间: {{ formData.planBeginTime }}</text>
							<text class="flex-1">计划结束时间: {{ formData.planEndTime }}</text>
						</view>
						<!-- <view class="record-item">
							<text>
								实际开发时间 {{ formData.actualStartTime }}
							</text>
							<text>
								实际结束时间 {{ formData.actualEndTime }}
							</text>
						</view> -->
					</view>
				</view>
			</view>

			<view class="list">
				<view
					class="card"
					:style="{
						padding: isLandscape == true ? '30px' : ''
					}"
				>
					<view style="font-weight: 700; margin: 10px; font-size: 15px">主料数据</view>
					<uni-table ref="tableRefs" stripe emptyText="暂无数据" class="unitable" border="" type="">
						<uni-tr>
							<uni-th align="center">材料名称</uni-th>
							<uni-th align="center">目标值kg</uni-th>
							<uni-th width="204" align="center">实际值kg</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list1" :key="index">
							<uni-td align="center">
								{{ item.materialName }}
							</uni-td>
							<uni-td align="center">{{ item.targetValue }}/{{ Number(item.targetValue) * Number(formData.stoveCount) }}</uni-td>
							<uni-td align="center">
								<u--input
									style="
										background-color: #fff;
										margin: 0 15px 5px 15px;
										height: 18px;

										border-radius: 5px;
									"
									placeholder="请输入"
									v-model="item.actualValue"
									clearable
								></u--input>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="list">
				<view
					class="card"
					:style="{
						padding: isLandscape == true ? '30px' : ''
					}"
				>
					<view style="font-weight: 700; margin: 10px; font-size: 15px">回炉料数据</view>
					<uni-table ref="tableRefs" stripe emptyText="暂无数据" class="unitable" border="" type="">
						<uni-tr>
							<uni-th align="center">材料名称</uni-th>
							<uni-th align="center">目标值kg</uni-th>
							<uni-th width="204" align="center">实际值kg</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list2" :key="index">
							<uni-td align="center">
								{{ item.materialName }}
							</uni-td>
							<uni-td align="center">{{ item.targetValue }}/{{ Number(item.targetValue) * Number(formData.stoveCount) }}</uni-td>
							<uni-td align="center">
								<u--input
									style="
										background-color: #fff;
										margin: 0 15px 5px 15px;
										height: 18px;

										border-radius: 5px;
									"
									placeholder="请输入"
									v-model="item.actualValue"
									clearable
								></u--input>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view style="height: 50px"></view>
			<view class="submit_btn_div" style="display: flex; justify-content: space-between; align-items: center">
				<button type="primary" :disabled="postLoading" :loading="postLoading" @click="sumbitBtn('保存')" class="submit_btn">保存</button>
				<button type="primary" :disabled="postLoading" :loading="postLoading" @click="sumbitBtn('确定')" class="submit_btn">确定</button>
				<button type="primary" :disabled="postLoading" :loading="postLoading" @click="sumbitBtn('取消')" class="submit_btn">取消</button>
			</view>
			<view style="height: 50px"></view>

			<view>
				<!-- <view class="flex justify-center" v-show="tableLoading">
					<u-loading-icon color="#000a7b"></u-loading-icon>
				</view> -->
				<!-- 空数据 -->
				<!-- <view v-show="tableList.length === 0 && !tableLoading">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, toRaw, reactive, onUnmounted, onMounted } from 'vue';
import { onShow, onPullDownRefresh, onLoad } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { PageResult, TabInfo } from '@/types/type';
import { getSecondTime } from '@/utils/common';
import { useDictionaryStore } from '@/stores/useDictionaryStore';

const postLoading = ref(false);

// 待完成数据
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);
//列表高度
const listHeight = ref('');

const isLandscape = ref(false);

function checkOrientation() {
	const windowWidth = uni.getSystemInfoSync().windowWidth;
	const windowHeight = uni.getSystemInfoSync().windowHeight;
	isLandscape.value = windowWidth > windowHeight;
}

function handleResize(res) {
	// 当窗口尺寸发生变化时调用此函数
	console.log('resize:', res.size.windowWidth, res.size.windowHeight);
	checkOrientation();
}

onMounted(() => {
	// 页面加载完成时检查一次方向
	checkOrientation();
	// 监听窗口尺寸变化
	uni.onWindowResize(handleResize);
});

onUnmounted(() => {
	// 组件卸载时移除监听器
	uni.offWindowResize(handleResize);
});

onLoad(() => {
	// #ifdef H5
	listHeight.value = 'calc(100vh - 88px)';
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = 'calc(100vh - 48px)';
	// #endif

	// 获取工序
	// getProcessList()
});

onPullDownRefresh(() => {
	// searchList();
	uni.stopPullDownRefresh();
});

const props = defineProps({
	id: {
		type: String,
		default: ''
	}
});
const list1 = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const getIdList = async (ids) => {
	await http({
		method: 'POST',
		url: '/mes/mesplanworkingform/querySmelt',
		data: {
			id: ids
		}
	}).then((res) => {
		Object.assign(formData, res.data);
		list1.value = [];
		list2.value = [];
		list3.value = [];
		formData.listRecord[0]?.details?.forEach((item) => {
			console.log(item);
			if (item.feedingType === 1) {
				list1.value.push(item);
			}else if (item.feedingType === 2) {
				list2.value.push(item);
			}else{
				list3.value.push(item);
			}
		});
	});
};
if (props.id) {
	getIdList(props.id);
}

// 假数据
let formData = reactive({
	id: '',
	createTime: '',
	lastUpdateTime: '',
	createdUserId: '',
	lastUpdatedUserId: '',
	createdUserName: '',
	lastUpdatedUserName: '',
	organizationId: '',
	organizationCode: '',
	plantId: '',
	organizationName: '',
	plantCode: '',
	plantName: '',
	monthPlanId: '',
	processesId: '',
	processesClassification: '',
	workSequence: '',
	figureNumber: '',
	planQuantity: '',
	plannedBatch: '',
	finishQuantity: '',
	validQuantity: '',
	invalidQuantity: '',
	materialId: '',
	materialCode: '',
	materialName: '',
	scrapQuantity: '',
	quantityUnit: '',
	isClosed: '',
	isPause: '',
	formStatus: '',
	finishTime: '',
	finishUser: '',
	approveTime: '',
	approveUser: '',
	processingOrderNumber: '',
	processingOrderType: '',
	shiftSystemId: '',
	shiftId: '',
	groupsId: '',
	planUserIds: '',
	planUsers: '',
	deviceId: '',
	deviceName: '',
	demandPeople: '',
	planBeginTime: '',
	planEndTime: '',
	beginTime: '',
	endTime: '',
	routingAllocationId: '',
	planDate: '',
	planDateId: '',
	stoveNum: '',
	stoveStatus: '',
	stoveCount: '',
	workCenterId: '',
	workCenterCode: '',
	workCenterName: '',
	version: '',
	remarks: '',
	deleted: '',
	ids: '',
	shiftName: '',
	stoveCountNum: '',
	pm: '',
	ms: '',
	shiftSet: '',
	tactYield: '',
	coreState: '',
	equipModel: '',
	sandModel: '',
	sandCoreNumber: '',
	tactTime: '',
	mdmMaterialDTO: '',
	listRecord: [],
	sequence: '',
	add: false
});

const sumbitBtn = async (title) => {
	if (title == '保存') {
		formData.stoveStatus = '0';
		formData.listRecord[0].details = [...list1.value, ...list2.value,...list3.value];
	} else if (title == '确定') {
		formData.stoveStatus = '1';
		formData.listRecord[0].details = [...list1.value, ...list2.value,...list3.value];
	} else if (title == '取消') {
	uni.navigateBack();
	}

console.log(formData);
	await http({
		url: '/mes/mesplanworkingform/saveSmelt',
		method: 'POST',
		data: formData
	}).then((res)=>{
		uni.showToast({
			title: `${title}成功！`,
			icon: 'none'
		});
		uni.navigateBack();
	})
	
};
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
	background-color: #fbfbff;
}

.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 4px;
		border-radius: 7px;
		padding: 12px 12px 12px 12px;
		transition: all 300ms ease;
		border: 1px solid #efefef;
		background-color: #fff;
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 3px;
		}
		.left {
			flex-basis: calc(50% + 10px);
		}
	}
}

.record-title {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 2px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 15px;
	}
	uni-text:nth-child(2) {
		font-weight: bold;
		font-size: 15px;
		min-width: 60px;
		text-align: right;
	}
}
.record-item {
	margin: 7px 0 !important;
	color: #8f8e94 !important;
	word-break: break-all;
	font-size: 14px;
}
.record-item1 {
	color: #8f8e94 !important;
	word-break: break-all;
	font-size: 13px;
}
.record-content .record-item > :first-child {
	min-width: 70px !important;
}

.submit_btn {
	// z-index: 2;
	width: 200px;
	// width: 95%;
	// margin-left: 10px;
	// bottom: 5px;
	// margin-top: -20px;
}
@media (orientation: landscape) {
	.search {
		:deep(.u-search__content) {
			box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
		}
	}
	.baseForm {
		padding: 0 20px;
		background-color: #fbfbff;
		.tab-bar {
			padding: 0 20px;
		}

		.u-line {
			padding: 10px 0;
		}
	}
	.list {
		.card {
			margin: $uni-page-padding;
			margin-top: 5px;
			margin-bottom: 4px;
			border-radius: 7px;
			padding: 12px 12px 12px 12px;
			transition: all 300ms ease;
			border: 1px solid #efefef;
			background-color: #fff;
			.card-flex {
				display: flex;
				align-items: flex-start;
			}
			.right {
				flex: 1;
			}
			.title {
				font-size: 14px;
				line-height: 40px;
				height: 40px;
				margin-top: 8px;
				font-weight: bold;
				color: #101010;
				border-top: 1px solid #e5ebff;
			}
			.uni-btn {
				float: right;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 15px;
				margin-top: 7px;
				font-weight: 400;
			}
			.des {
				font-size: 12px;
				line-height: 20px;
				margin-bottom: 3px;
			}
			.left {
				flex-basis: calc(50% + 10px);
			}
		}
	}

	.record-title {
		display: flex;
		justify-content: space-between;
		margin: 2px 0 2px 0;
		color: $primary-color;
		uni-text:nth-child(1) {
			font-weight: bold;
			font-size: 15px;
		}
		uni-text:nth-child(2) {
			font-weight: bold;
			font-size: 15px;
			min-width: 60px;
			text-align: right;
		}
	}
	.record-item {
		margin: 7px 0 !important;
		color: #8f8e94 !important;
		word-break: break-all;
		font-size: 14px;
	}
	.record-item1 {
		color: #8f8e94 !important;
		word-break: break-all;
		font-size: 13px;
	}
	.record-content .record-item > :first-child {
		min-width: 70px !important;
	}
}

@media (orientation: portrait) {
	.search {
		:deep(.u-search__content) {
			box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
		}
	}
	.baseForm {
		background-color: #fbfbff;
		.tab-bar {
			padding: 0 20px;
		}

		.u-line {
			padding: 10px 0;
		}
	}
	.list {
		.card {
			margin: $uni-page-padding;
			margin-top: 5px;
			margin-bottom: 4px;
			border-radius: 7px;
			padding: 12px 12px 12px 12px;
			transition: all 300ms ease;
			border: 1px solid #efefef;
			background-color: #fff;
			.card-flex {
				display: flex;
				align-items: flex-start;
			}
			.right {
				flex: 1;
			}
			.title {
				font-size: 14px;
				line-height: 40px;
				height: 40px;
				margin-top: 8px;
				font-weight: bold;
				color: #101010;
				border-top: 1px solid #e5ebff;
			}
			.uni-btn {
				float: right;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 15px;
				margin-top: 7px;
				font-weight: 400;
			}
			.des {
				font-size: 12px;
				line-height: 20px;
				margin-bottom: 3px;
			}
			.left {
				flex-basis: calc(50% + 10px);
			}
		}
	}

	.record-title {
		display: flex;
		justify-content: space-between;
		margin: 2px 0 2px 0;
		color: $primary-color;
		uni-text:nth-child(1) {
			font-weight: bold;
			font-size: 15px;
		}
		uni-text:nth-child(2) {
			font-weight: bold;
			font-size: 15px;
			min-width: 60px;
			text-align: right;
		}
	}
	.record-item {
		margin: 7px 0 !important;
		color: #8f8e94 !important;
		word-break: break-all;
		font-size: 14px;
	}
	.record-item1 {
		color: #8f8e94 !important;
		word-break: break-all;
		font-size: 13px;
	}
	.record-content .record-item > :first-child {
		min-width: 70px !important;
	}
}
</style>
